<template>
    <div class="window column"
        v-show="view">
        <div class="row top">
            <h2>添加收藏：写短评</h2>
            <i class="el-icon-close"
                @click="closeView"></i>
        </div>
        <div class="title row">
            <el-radio v-model="radio"
                label="1">想看</el-radio>
            <el-radio v-model="radio"
                label="2">看过</el-radio>
            <span>给个评价吧（可选）</span>
            <el-rate v-model="value"></el-rate>
        </div>
        <div class="content column-center">
            <span>标签(多个标签用空格分隔):</span>
            <input type="text">
            <span>简短评论:</span>
            <el-input type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
            </el-input>

        </div>
        <div class="row tag">
            <el-checkbox v-model="checked">下次自动登陆</el-checkbox>
        </div>
        <div class="bottom row">
            <button>保存</button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        open: {
            type: Function,
            default: null
        },
        close: {
            type: Function,
            default: null
        }
    },
    data() {
        return {
            view: false
        }
    },
    methods: {
        openView() {
            this.view = true
            this.open && this.open()
        },
        closeView() {
            this.view = false
            this.close && this.close()
        }
    }
}
</script>

<style lang="less" scoped>
    .window {
        position: fixed;
        left: 30%;
        width: 480px;
        height: 380px;
        border: 1px solid dimgray;
        padding: 5px 5px 5px 5px;
        background: #fff;
        .top {
            background: #ebf5ea;
            justify-content: space-between;
            h2 {
                padding-top: 15px;
            }
        }
        .title {
            padding-top: 40px;
            padding-left: 50px;
            span {
                margin-left: 10px;
                font-size: 13px;
                line-height: 20px;
            }
        }
        .content {
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 20px;
            span {
                font-size: 13px;
                margin-bottom: 5px;
            }
            input {
                width: 260px;
                margin-bottom: 30px;
            }
        }
        .tag {
            margin-top: 8px;
            margin-right: 50px;
            justify-content: flex-end;
        }
        .bottom {
            margin-top: 60px;
            background: #ebf5ea;
            justify-content: flex-end;
            button {
                margin: 10px;
                width: 60px;
            }
        }
    }
</style>
